<!--
 * @Author: ITDLCL
 * @Date: 2024-10-24 13:22:07
 * @LastEditors: ITDLCL
 * @Description: 活动列表
-->
<template>
  <view class="act-list border-top">
    <view
      class="list-groups d-flex border-bottom"
      :class="[customStyle]"
      v-for="(item, index) in list"
      :key="index"
      @click="activeClick(item)"
    >
      <view class="lf border-right">
        <view
          class="lf_thumb bg-cover border-bottom"
          :style="{
            'background-image': 'url(' +  (customStyle == 'home'? item.actPictureUrl : item.actPictureUrlErect) + ')',
          }"
        ></view>
        <ActiveTag :tag-list="item.actLabels" />
      </view>

      <view class="rg">
        <view class="title siyuan-medium show-four-lines" v-html="item.title"></view>
        <text
          v-if="customStyle != 'home'"
          :class="{ time: customStyle != 'home', desc: true, 'intel-one-mono-regular': true }"
        >
          {{ item.actStartTime }} - {{ item.actEndTime }}
        </text>

        <text class="desc">{{ item.actArea }}</text>

        <text class="time desc home-time intel-one-mono-regular" v-if="customStyle == 'home'">
          {{ item.actStartTime }} - {{ item.actEndTime }}
        </text>

        <view class="d-flex sale" v-if="customStyle == 'activity'">
          <text class="intel-one-mono-medium">¥{{ item.minPrice }}-{{ item.maxPrice }}</text>
          <text class="siyuan-medium">{{ getPayData(item.actStartTime, item.actEndTime) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { openPage, getPayData } from "@/util/index.js";
import ActiveTag from "../Tags/ActiveTag.vue";
const props = defineProps({
  customStyle: {
    type: String,
    default: "home",
  },
  list: {
    type: Array,
    default: [],
  },
});

function activeClick(item){
	if(item.type && item.type == 2){
		item.url?openPage('/pages/information/webpage?url=' + item.url, false):'';
		return;
	}
	openPage('/pages/activity/detail?id=' + item.id, true)
}
</script>

<style lang="scss" scoped>
.act-list {
  // background-color: #FFFFFF;
  // padding-bottom: 400rpx;
  .list-groups {
    background-color: #ffffff;
  }
  .lf {
    width: 306rpx;
    flex-shrink: 0;
    &_thumb {
      width: 100%;
      height: 406rpx;
    }
  }
  .rg {
	position: relative;
    width: -webkit-fill-available;
    padding: 36rpx 34rpx 34rpx;
    .title {
      min-height: 144rpx;
      margin-bottom: 124rpx;
      font-size: 34rpx;
      font-weight: 500;
      line-height: 40rpx;
    }
    .desc {
      display: block;
      font-size: 20rpx;
      line-height: 28rpx;
    }
    .time {
		position: absolute;
		bottom: 36rpx;
        font-family: "intel-one-mono-regular";
    }
    .home-time {
      margin-top: 82rpx;
    }
    .sale {
      margin-top: 100rpx;
      padding-right: 30rpx;
      align-items: center;
      justify-content: space-between;
      font-size: 26rpx;
    }
  }
}
.home {
  .lf {
    width: 187px;
    &_thumb {
      height: 336rpx;
    }
  }
  .rg {
    .title {
      margin-bottom: 68rpx;
    }
  }
}
.activity {
	.rg  {
		.time {
			position: inherit;
			bottom: 0;
		}
		.sale {
			position: absolute;
			width: 100%;
			bottom: 36rpx;
			padding-right: 60rpx;
		}
	}
}
</style>
